<template>
  <div class="home-container">
    <!-- 顶部导航栏 -->
    <van-nav-bar fixed>
      <!-- 左边插槽 -->
      <template #left> <div class="logo"></div></template>
      <!-- 右边插槽 -->
      <template #right>
        <van-button
          round
          class="search-btn"
          size="small"
          icon="search"
          @click="$router.push('/search')"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>
    <!-- 2.tab栏 -->
    <van-tabs v-model="active" @click="tabClick">
      <van-tab v-for="item in channels" :key="item.id" :title="item.name">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell
              v-for="item in list"
              :key="item.art_id"
              :title="item.title"
              @click="
                $router.push({ path: '/article', query: { id: item.art_id } })
              "
            >
              <template #label>
                <!-- grid宫格显示图片 -->
                <van-grid :column-num="item.cover.type">
                  <van-grid-item
                    v-for="(value, index) in item.cover.images"
                    :key="index"
                  >
                    <van-image lazy-load :src="value" />
                  </van-grid-item>
                </van-grid>
                <!-- div显示文本 -->
                <div>
                  <span>{{ item.aut_name }}</span
                  >&nbsp; <span>{{ item.comm_count }}</span
                  >&nbsp;
                  <span>{{ item.pubdate | fromNow }}</span>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// 引入网络中间层
import { getChannelList, getArticleList } from './home.js'
//导入moment
import moment from 'moment'
//设置语言
moment.locale('zh-cn')
export default {
  name: 'home',
  data () {
    return {
      active: 0,
      loading: false, //加载更多动画
      finished: false, //上拉 加载全部数据开关
      list: [], //列表数据
      isLoading: false, //下拉 刷新动画
      channels: [],
      timestamp: null
    }
  },
  filters: {
    fromNow (value) {
      return moment(value).fromNow()
    }
  },
  async created () {
    // 1.加载频道列表
    let res = await getChannelList()
    // console.log(res)
    // 1.1绑定数据
    this.channels = res.data.data.channels
  },
  methods: {
    async onLoad () {
      // 2.加载文章列表

      // 2.1判断是不是第一页
      if (!this.timestamp) {
        this.timestamp = Date.now()
      }
      // 2.2请求数据
      let res = await getArticleList({
        channel_id: this.channels[this.active].id,
        timestamp: this.timestamp
      })
      // 2.3绑定数据
      this.timestamp = res.data.data.pre_timestamp
      this.list.push(...res.data.data.results)
      console.log(res)
      // 2.4关闭加载动画
      this.loading = false
      // 2.5最多50条
      if (this.list.length >= 50) {
        this.finished = true
      }
    },
    // 2.下拉事件
    onRefresh () {
      // 0.一旦下拉刷新,无条件修改上拉列表finished为false
      this.finished = false
      // 1.清空当前数据
      this.list = []
      // 2.重新加载数据
      this.loading = true
      this.onLoad()
      // 3.关闭下拉刷新动画,否则顶部动画会一直转圈
      this.isLoading = false
    },
    // tab栏切换
    tabClick () {
      // 1.清空列表
      this.list = []
      this.timestamp = null
      // 2.设置loading状态true,开始加载
      this.loading = true
      // 3.主动调用onLoad()
      this.onLoad()
    }
  }
}
</script>

<style lang="less">
.home-container {
  .van-nav-bar {
    z-index: 10;
  }
  //顶部栏
  .van-nav-bar__content {
    z-index: 10;
    background-color: #0098fa;
    .logo {
      width: 100px;
      // 注意点
      // 1.如果在背景图中使用@，则会默认前面加一个./@，导致项目报错
      // 2.解决：在@前面加上~
      background: url('~@/assets/logo.png') no-repeat;
      background-size: cover;
      height: 30px;
    }
    .van-button {
      background-color: #00affd;
      width: 100px;
      height: 30px;
      border: 1px solid transparent;
      .van-icon {
        color: #fff;
      }
    }
  }
  // tab栏
  .van-tabs {
    /* 2.1 头部tab栏 */
    .van-tabs__wrap {
      position: fixed;
      z-index: 10;
      /* 解决频道列表不能自动滚动bug
    当频道列表数据很多的时候会被内容撑开，导致无法自动滚动。给一个宽度即可
    */
      top: 46px;
      width: 100%;
    }

    /* 2.2 内容 */
    .van-tabs__content {
      /* 解决tabs头部固定定位托标问题，设置列表栏的上margin,避免被导航栏与tab栏遮挡(固定定位导致脱标) */
      margin-top: 88px;
      margin-bottom: 0px;
    }
  }
}
</style>
